<template>
	<div class="notice">
		<div class="box-mask"></div>
		<transition>
			<div class="box" v-if="isShow">
			  <div class="box-title">
				  {{title}}
			  </div>
			  <template v-if = 'html'>
				  <div class="box-content" v-html=" this.company ? msg : message"></div>
			  </template>
			  <template v-else>
			  	<div class="box-content">
					<template v-if='company'>
						{{msg}}
					</template>
					<template v-else>
						{{message}}
					</template>
			  	</div>
			  </template>
			  <view class='box-button'>
				  <template v-if="btns">
				  	<button @click="hide(true)" :class="{'agree':!showCancel}" type="primary">确认</button>
					<button v-if= "showCancel" @click="hide(false)" type="primary">取消</button>
				  </template>
				  <template v-else>
				  	<button class="agree" @click="hide(true)" type="primary" :disabled="disabled">{{ agree }}</button>
				  </template>
			  </view>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "用户须知"
    },
	company:{
		type: String,
		default: ""
	},
    message: {
      type: String,
      default: `<p>尊敬的客户，您即将进入保险销售页面，请仔细阅读保险条款内容及注意事项，填写相关信息。</p>
		<p>根据[2020]26号国家互联网个人保险销售的监管规定，为保障客户权益，您在本系统内投保过程中的操作将被全部记录。</p>
		<p>敬请知悉。</p>`
    },
	autohide:{
		type:Boolean,
		default:false
	},
	html:{
		type:Boolean,
		default:true
	},
	btns:{
		type:Boolean,
		default:false
	},
    duration: {
      type: Number,
      default: 3000
    },
	callback:{
		default: ''
	},
	showCancel:{
		type:Boolean,
		default:false
	}
  },
  computed:{
	  msg(){
		var str = '<p>尊敬的客户，您将进入'+ this.company +'销售页面，请仔细阅读保险条款内容及注意事项，填写相关信息。</p>'+
		`<p>根据[2020]26号国家互联网个人保险销售的监管规定，为保障客户权益，您在本系统内投保过程中的操作将被全部记录。</p>
		<p>敬请知悉。</p>` 
		return str;
	  }
  },
  data() {
    return {
      isShow: false,
	  agree:'3s',
	  disabled:true,
	  times:3
    };
  },
  mounted() {
  	setTimeout(()=>{
		this.changeTime()
	},1000)
  },
  methods: {
    show() {
		this.isShow = true;
		if(this.autohide){
			setTimeout(this.hide, this.duration);
		}
    },
    hide(flag) {
		this.isShow = false;
		setTimeout(()=>{
			this.remove();
		},500)
		if(this.callback){
			this.callback({
				confirm:flag,
				cancle:!flag
			})
		}
    },
	changeTime(){
		if(this.times>0){
			this.times--;
			this.agree = this.times + 's';
			setTimeout(()=>{
				this.changeTime()
			},1000)
		}else{
			this.agree = '我已知晓';
			this.disabled = false;
		}
	}
  }
};
</script>

<style>
	.notice{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.box-mask{
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 199;
	}
	.box {
	  position: fixed;
	  width: 90%;
	  top: 50%;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  height: 348px;
	  background: #fff;
	  margin: 0 auto;
	  z-index: 200;
	  transform: translateY(-50%);
	  border-radius: 5%;
	  overflow: hidden;
	}
	.box-title{
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #007AFF;
		color: #fff;
		font-weight: bold;
	}
	.box-content {
	  margin: 10px auto;
	  font-size: 14px;  
	  padding: 8px 16px;
	  background: #fff;
	  border-radius: 3px;
	  margin-bottom: 8px;
	  text-indent:1em;
	}
	.box-button{
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.box-button button{
		/* background: #007AFF; */
		color: #fff;
		margin: 0 auto;
		display: inline-block;
		margin: 20rpx;
		width: 40%;
	}
	.box-button .agree{
		color: #fff;
		margin: 0 auto;
		width: 80%;
	}
	.v-enter,
	.v-leave-to {
		/* 透明度为0 */
		opacity: 0;
		left: -90%;
		top: -348px;
		transform:scale(0.5,0.5)
	}
	
	.v-enter-active,
	.v-leave-active {
		/* 渐变 */
		transition: all 1s ease;
	}
</style>